// https://threejs.org/docs/index.html#api/zh/geometries/ExtrudeGeometry
import { 
  Color,
  DoubleSide,
  ExtrudeGeometry,
  LatheGeometry,
  LineSegments,
  Mesh,
  MeshBasicMaterial,
  Object3D,
  PerspectiveCamera, 
  Scene, 
  SphereGeometry, 
  Vector2, 
  Path,
  WebGLRenderer, 
  WireframeGeometry, 
  Shape,
  Group
} from 'three'
import stats from '../../utils/stats'
import dat from 'dat.gui'
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'

const scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.set(0, 60, 120)
camera.lookAt(0, 0, 0)

let group = new Group()
let options = {
  // int，用于沿着挤出样条的深度细分的点的数量，默认值为1。
  steps: 2,
  // float，挤出的形状的深度，默认值为100。
  depth: 16,
  // bool，对挤出的形状应用是否斜角，默认值为true
  bevelEnabled: true,
  // float，设置原始形状上斜角的厚度。默认值为6。
  bevelThickness: 1,
  // 斜角与原始形状轮廓之间的延伸距离，默认值为bevelThickness-2。
  bevelSize: 1,
  // Distance from the shape outline that the bevel starts. Default is 0.
  bevelOffset: 0,
  // 斜角的分段层数，默认值为3。
	bevelSegments: 1
};
const geometry = new ExtrudeGeometry(drawShape(), options).center()
const matertial = new MeshBasicMaterial({
  color: 0xff9900,
  transparent: false,
  side: DoubleSide
})
const shape = new Mesh(geometry, matertial)
group.add(shape)
const wireFrame = new WireframeGeometry(geometry)
const lines = new LineSegments(wireFrame)
group.add(lines)

scene.add(group)

const controls = {
  animate: true,
  color: matertial.color.getStyle(),
  redraw() {
    // 生成新几何体
    let newGeometry = new ExtrudeGeometry(drawShape(), options).center()

    ;(group.children[0] as Mesh).geometry.dispose()
    ;(group.children[1] as Mesh).geometry.dispose()

    ;(group.children[0] as Mesh).geometry = newGeometry;
    (group.children[1] as Mesh).geometry = new WireframeGeometry(newGeometry);
  }
}

const gui = new dat.GUI()
gui.add(controls, 'animate')
gui.addColor(controls, 'color').onChange(e => {
  matertial.color.set(new Color(e))
})
gui.add(options, 'steps', 1, 10, 1).onChange(e => controls.redraw())

const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0x000000)

document.body.appendChild(renderer.domElement)
const trackballControls = new TrackballControls(camera, renderer.domElement)

function render() {
  stats.update()
  trackballControls.update()

  controls.animate && (group.rotation.y += 0.01)

  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

render()


function drawShape() {
  const shape = new Shape()

  // 起始点
  shape.moveTo(10, 10)

  // straight line upwards 直线向上
  shape.lineTo(10, 40)

  // the top of the figure, curve to the right
  // 图的顶部，向右弯曲
  shape.bezierCurveTo(15, 25, 25, 25, 30, 40)

  // spline back down
  shape.splineThru(
    [
      new Vector2(32, 30),
      new Vector2(28, 20),
      new Vector2(30, 10)
    ]
  )

  // curve at the bottom 底部曲线
  shape.quadraticCurveTo(20, 15, 10, 10)

  // 添加眼睛
  let eye1 = new Path()
  eye1.absellipse(16, 24, 2, 3, 0, Math.PI * 2, true, 0)
  shape.holes.push(eye1)
  let eye2 = new Path()
  eye2.absellipse(23, 24, 2, 3, 0, Math.PI * 2, true, 0)
  shape.holes.push(eye2)

  // 添加嘴巴
  let mouth = new Path()
  mouth.absarc(20, 16, 2, 0, Math.PI, true)
  shape.holes.push(mouth)

  return shape
}